<!--
 * @Author: ckk
 * @Date: 2022-08-16 10:35:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-08-10 14:12:49
 * @Description: 一行两个2
-->
<template>
  <div class="five-static">
    <div
      class="five-item"
      v-for="(item, index) in datas.imageList"
      :key="index"
      :style="{ borderRadius: datas.borderRadius + 'px', marginBottom: datas.pageMargin + 'px' }">
      <img :src="item.src" alt="" @click="goOhter(item)"/>
      <p :style="{ fontWeight: datas.textWeight }">{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    datas: Object
  },
  data () {
    return {};
  },
  methods: {
    goOhter (item) {
      this.$emit('goDetail', item);
    }
  }
};
</script>

<style scoped lang="scss">
.five-static {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 16px;
  .five-item {
    width: 45%;
    height: 72px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    p {
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      width:80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      position: absolute;
      left: 16px;
      top: 16px;
    }
  }
}
</style>
